<template>
  <div>
    <el-container style="height: 800px; border: 1px solid #f5f5f5" direction="horizontal">
        <el-aside width="200px" >
          <el-menu  @select="handleSelect" default-active="home"  >
            <el-menu-item index="home">首页</el-menu-item>
            <el-menu-item index="roommanage">宿舍分配</el-menu-item>
            <el-menu-item index="roomshow">宿舍查看</el-menu-item>
            <el-menu-item index="4" >日志管理</el-menu-item>
            <el-menu-item index="5" >学生管理</el-menu-item>
            <el-menu-item index="6" >院系管理</el-menu-item>
            <el-menu-item index="7" >出入管理</el-menu-item>
            <el-menu-item index="8" >申报管理</el-menu-item>
            <el-menu-item index="9" >维修查看</el-menu-item>
          </el-menu>
        </el-aside>
        <el-container >
          <el-header height="60px">
            <!-- Header content -->
            head
          </el-header>
          <el-main style="width: 100%; padding: 0;">
              <router-view></router-view>
          </el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",

  data() {
    return{

    }
  },

  mounted() {
    
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key,keyPath){
      if(key === 'home'){
        if(this.$route.path !== '/home'){
          this.$router.push(`/home`)
        }
      }else{
        if(this.$route.path !== `/home/${key}`){
          console.log(this.$route.path)
          this.$router.push(`/home/${key}`)
        }
      }
        
      
    }
  },
};
</script>

<style lang="css" scoped>
  .el-header {
    
    color: #36c0df;
    line-height: 60px;
    
  }
  
</style>
